<template>
	<view class="container">
		<Header>履职得分</Header>
		<view class="content">
			<view class="top">
				<image src="https://zhzx.on-line-demo.com/image/df-bg.png" mode="aspectFill"
					style="width: 100%;height: 100%;"></image>
				<view class="info">
					我的得分
					<view class="score">
						{{ data.total }}
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="list-content">
					<view class="list-item">
						<view class="item-name">
							<label>1</label>
							<view>书香政协活动</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.sxzx }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>2</label>
							<view>学习培训</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.xxpx }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>3</label>
							<view>全体会议</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.qthy }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>4</label>
							<view>撰写提案</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.tian }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>5</label>
							<view>协商议政</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.xsyz }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>6</label>
							<view>民主监督活动</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.mzjd }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>7</label>
							<view>调研活动</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.dyhd }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>8</label>
							<view>社情民意信息</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.sqmy }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>9</label>
							<view>联系界别群众工作</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.lxjb }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>10</label>
							<view>“服务为民”活动</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.fwwm }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>11</label>
							<view>参与专委会组织的活动或会议</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.zwh }}
						</view>
					</view>
					<view class="list-item">
						<view class="item-name">
							<label>12</label>
							<view>履职报告</view>
						</view>
						<view class="item-border"></view>
						<view class="item-score">
							{{ data.bg }}
						</view>
					</view>
				</view>
			</view>
			<view class="download-btn" @click="downloadFile">
				<image src="/static/image/download.png" mode="widthFix" style="width: 30px;"></image>
				下载履职考核项目量化分值表
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	export default {
		components: {
			Header
		},
		data() {
			return {
				data: {},
				rule: '',
				file: {}
			}
		},
		onLoad() {

		},
		mounted() {
			this.getUserScore()

		},
		methods: {
			downloadFile() {
				if (!this.file.score_url) {
					uni.showToast({
						title: '暂无量化分指标，请等待管理员生成',
						icon: 'none',
						duration: 2000
					});
					return
				}
				uni.showLoading({
					title: '下载中'
				});
				//下载文件
				uni.downloadFile({ //只能是GET请求
					url: this.file.score_url,
					success: (res) => {
						uni.hideLoading()
						//下载成功
						if (res.statusCode === 200) {
							//保存文件
							let tempFile = res.tempFilePath;
							let name = this.file.title || (new Date().getTime())

							//保存成功之后 打开文件
							uni.getFileSystemManager().saveFile({
								tempFilePath: tempFile,
								success: (res) => {
									// uni.showModal({
									// 	title: '提示', //标题
									// 	content: '文件下载成功，保存路径：'+ res.savedFilePath, //提示内容
									// 	showCancel: false //不显示取消按钮
									// })
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu: true, //是否可以分享
										success: (res) => {
											console.log(res);
										},
										fail: (e) => {
											uni.showToast({
												title: '打开失败',
												icon: "error"
											})
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: '文件下载失败',
										icon: "error",
									})
								}
							})
						}
					},
					fail: (e) => {
						console.log(e, '文件下载失败')
						uni.hideLoading()
						uni.showToast({
							title: '文件下载失败',
							icon: "error",
						})
					}
				});

			},
			getUserScore() {
				request({
					url: '/user/lvzhiScore',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data.score_mx || {}
						this.data.total = res.data.allscore || 0
						this.file = res.data.score_file || {}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getRule() {
				request({
					url: '/user/lvzhiRule',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.rule = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f4f4f4;
		height: 100vh;
		overflow-y: auto;
	}

	.download-btn {
		width: calc(100% - 60px);
		background-color: #fff;
		padding: 12px 15px;
		margin: 20px auto 20px;
		border-radius: 15px;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
		text-align: center;
		font-size: 14px;
		color: #ea5c55;

		image {
			vertical-align: middle;
		}
	}

	.content {
		.top {
			height: 400rpx;
			color: #f2f2f2;
			position: relative;
			box-sizing: border-box;
			z-index: 2;

			.info {
				position: absolute;
				top: 25%;
				width: 100%;
				text-align: center;

				.score {
					font-size: 60px;
				}
			}

		}


		.notice {
			background-color: #fff;
			box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
			margin: -50rpx 15px 10px;
			border-radius: 15px;
			overflow: hidden;
			position: relative;
			z-index: 3;


			.list-content {
				margin: 20px 30px;
				width: calc(100% - 60px);
			}

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding: 12px 0px;
				position: relative;
				width: 100%;
			}

			label {
				display: inline-block;
				min-width: 25px;
			}

			.item-name {
				background-color: #fff;
				position: relative;
				z-index: 1;
				padding-right: 10px;
				display: flex;
				align-items: center;
			}

			.item-score {
				color: #ea5c55;
				min-width: 30px;
				height: 20px;
				line-height: 22px;
				border-radius: 20px;
				font-size: 14px;
				background-color: #fff;
				position: relative;
				z-index: 1;
				padding-left: 10px;
			}

			.item-border {
				width: calc(100% - 20px);
				margin: 0px 10px;
				height: 1px;
				position: absolute;
				border-bottom: 1px dashed #000;
			}
		}

	}
</style>